<template>
  <div
    id="new"
    :style="{
      'margin-bottom': Object.keys(getMusic).length == 0 ? '50' : '116px',
    }"
  >
    <div
      v-for="item in news"
      :key="item.title"
      @click="toDetail(item.path)"
      class="new-item"
    >
      <div class="left">
        <span>{{ item.title }}</span>
        <span>{{ item.passtime }}</span>
      </div>
      <div class="right">
        <img :src="item.image" alt="" v-lazy="item.image" />
      </div>
    </div>
    <TabBar />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getNews } from "@/api/news";
import TabBar from "@/components/common/TabBar";
import { ifTabBar } from "@/common/mixin";
export default {
  data() {
    return {
      news: [],
    };
  },
  components: {
    TabBar,
  },
  computed: {
    ...mapGetters(["getMusic", "getAudio"]),
  },
  mixins: [ifTabBar],
  created() {
    // console.log("aaasda");
    // console.log(getNews);
    const radNum = Math.floor(Math.random() * 100 + 1);
    const params = { page: radNum };
    getNews(params).then((res) => {
      console.log(res.result);
      this.news = res.result;
    });
  },
  methods: {
    toDetail(path) {
      this.$router.push({ path: "/new/Detail", query: { path } });
    },
  },
};
</script>

<style lang='less' scoped>
#new {
  margin-bottom: 50px;
}
.new-item {
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px;
  .left {
    display: flex;
    flex-direction: column;
    padding:10px;
    span:nth-child(2) {
      margin-top: 10px;
      font-size: 12px;
      color: #888888;
    }
  }
}
</style>
